<template>
  <section class="c-p" v-if="liveInfo">
    <div class="c-bd-b12-f5">
      <!-- 免费或有权限 -->
      <!-- <div v-if="liveInfo.isSaleOnly == 1 &&(liveInfo.payType == 1 || liveInfo.isBuyed == 1)&&!isMarketing" class="c-pl24 theme-fc c-fs26 c-fw600 c-flex-grow1 c-w0">
        <span v-if="liveInfo.payType == 2" class="c-fs18">{{'￥' | iosPriceFilter}}</span>
        <span>{{liveInfo.payType | priceValueFilter(liveInfo.price)}}</span>
      </div> -->
      <price-bar v-if="liveInfo.isSaleOnly == 1 && !(liveInfo.sales || (liveInfo.bargain && ((liveInfo.bargain.status == 1 && liveInfo.bargain.isPreheat == 1) || liveInfo.bargain.status == 2)) || (liveInfo.collage && (liveInfo.collage.status == 2 || liveInfo.collage.status == 1)) || liveInfo.isFriendHelper) && (!liveInfo.isBuyed||(liveInfo.isBuyed == 1 && liveInfo.permissionType == 45))" class="c-ph0"
        :class="isRecommendShow ? '': 'c-pt20'"
        :styleType="2"
        :isFlat="true"
        :dataInfo="liveInfo"
        :showTryLook="showTryLook"
        :recType="recType"
        :chainInfo="chainInfo"></price-bar>
      <discount-info class="c-pt16" v-if="liveInfo.payType == 2&& liveInfo.isSaleOnly == 1 && !isiOS && (!liveInfo.isBuyed||(liveInfo.isBuyed == 1 && liveInfo.permissionType == 45))"
        :couponList="couponList"
        :dataInfo="liveInfo"
        :chainInfo="chainInfo"
        :isMarketing="isMarketing"
        @clickShowCoupon="showCoupon = true"
      >
      </discount-info>
      <vip-entry class="c-ph24 c-mt20"
        :dataInfo="liveInfo"
        v-if="(!liveInfo.isFriendHelper || companyAuth.enableFriendHelper == 0) &&liveInfo.isSaleOnly == 1 &&(!liveInfo.isBuyed||(liveInfo.isBuyed == 1 && liveInfo.permissionType == 45)) && !$isWxAppIos() && !isiOS"
      ></vip-entry>

      <div v-if="!isRecommendShow || (isRecommendShow && liveInfo.hasPermission)" class="c-ph24 c-pt24 c-fw500 c-fs24 c-fc-xblack c-lh42">
        <span v-if="showTryLook" class="try-look-tag theme-bg-10 theme-fc c-vcAlign-middle">可试看</span>
        {{ liveInfo.name }}
      </div>
      <div class="c-ph24 c-pt20 c-fs22 c-fc-gray" v-if="liveInfo.liveNotice">直播预告：{{liveInfo.liveNotice}}</div>
      <div class="c-ph24 c-pt20 c-flex-row c-fc-gray c-fs20 c-justify-sb" :class="liveInfo.sales ?'c-pb16 c-bd-b1':''">
        <div class="c-flex-row c-aligni-center" :class="(liveInfo.isShowViewers==1&&liveInfo.liveStatus == 1) || liveInfo.startAt ? 'c-pb24' : ''">
          <span v-if="liveInfo.isShowViewers==1&&liveInfo.liveStatus == 1" class="c-mr24"><i class="iconfont c-fs20 c-mr8">&#xe6bb;</i>{{liveInfo.watchNum}}人次观看</span>
          <div v-if="liveInfo.startAt" class="c-flex-row c-aligni-center">
            <i class="iconfont c-fs20 c-mr8">&#xe70f;</i>
            <span>{{liveInfo.startAt}}开始直播</span>
          </div>
          <!-- <i class="iconfont c-fs20 c-mr8" v-if="liveInfo.expireTime">&#xe70f;</i>
          <span v-if="liveInfo.expireTime">有效期至&ensp;{{liveInfo.expireTime}}</span> -->
        </div>
      </div>
      <!-- <div v-if="liveInfo.startAt" class="c-ph24 c-pt12 c-fs22 c-fc-gray">开播时间：{{liveInfo.startAt}}</div>
      <div class="c-ph24 c-pb24 c-fc-gray c-flex-grow1 c-fs20 c-flex-row c-aligni-center " v-if="liveInfo.liveStatus == 1">
        <span v-if="liveInfo.isShowViewers">{{liveInfo.watchNum}}次观看</span>
      </div> -->
      <!-- 开启入群引导且为被动引导方式 -->
      <!-- 引导入群 -->
      <invite-group class="c-pr24 c-pb24"
        v-if="liveInfo.isBuyed == 1 && liveInfo.guideData && liveInfo.guideData.isOpenGuide == 1 && liveInfo.guideData.guideType.includes(1)"
        :guideText="liveInfo.detailGuideTitle"
        @handleShowGuidePop="handleShowGuidePop"
      >
      </invite-group>
      <bargain-rules class="c-bd-t12-f5" v-if="liveInfo.bargain != null && !liveInfo.isBuyed" :isPreheat="liveInfo.bargain.isPreheat" :status="liveInfo.bargain.status"></bargain-rules>
      <!-- <section v-if="liveInfo.isBuyed == 1 && liveInfo.guideData && liveInfo.guideData.isOpenGuide == 1 && liveInfo.guideData.guideType.includes(1)" @click="handleShowGuidePop()"
        class="c-mh24 c-mb30 c-pl16 c-pr20 c-hh64 c-fs24 camp-guide c-flex-row c-aligni-center">
        <img class="c-ww52 c-hh32" :src="require('../../../assets/i/wap/course/group_guide.png')" alt="">
        <div class="c-w0 c-flex-grow1 c-fc-xblack c-fw600 c-pl16">{{ liveInfo.detailGuideTitle }}</div>
        <div class="iconfont c-fs40 fc-3F73F8">&#xe986;</div>
      </section> -->
    </div>
    <div class="c-bd-b12-f5  c-flex-row c-aligni-center c-justify-sb c-pv30 c-ph24" v-if="liveInfo.userRole<2&&(liveInfo.liveValidTime||liveInfo.effectiveProd)&&((liveInfo.isSaleOnly==0&&liveInfo.isSaleTogether==1&&liveInfo.hasPermission)||(liveInfo.isSaleOnly==1))">
      <div class="c-fs26 c-fc-xblack c-fw600">直播有效期</div>
      <valid-time-com v-if="liveInfo && liveInfo.effectiveProd" :dataInfo="liveInfo" :prodId="liveInfo.id" :prodType="51" :isShowModal="false" @openValidTimeDesc="openValidTimeDesc"></valid-time-com>
      <span class="c-fs24 theme-fc" v-else-if="liveInfo.liveValidTime">{{liveInfo.liveValidTime}}</span>
    </div>
    <!-- 非强制表单入口 -->
    <formEntry v-if="liveInfo.hasPermission && (liveInfo.isOpenFormCollection == 1 && liveInfo.userRole<2&&((liveInfo.collectPage==3&& liveInfo.isRelForm == true &&liveInfo.hasFormLog == false && isShowFormlg)||(liveInfo.hasFormLog&&liveInfo.enableEdit==2&& isShowFormlg&& liveInfo.isRelForm == true)))"
      relType="20"  :relId="liveInfo.lpId"  :dataInfo="liveInfo"
      classObject="c-fs22" fontSizeClass="c-fs20" iconSizeClass="c-fs14" topClass="c-bd-b12-f5"
      @goForm="goForm" ></formEntry>
    <!-- <rewrite-form class="c-bd-b12-f5" v-if="liveInfo.userRole<2&&((liveInfo.collectPage==3&& liveInfo.isRelForm == true &&liveInfo.hasFormLog == false && isShowFormlg)||(liveInfo.hasFormLog&&liveInfo.enableEdit==2&& isShowFormlg&& liveInfo.isRelForm == true))"
      :isRelForm="liveInfo.isRelForm" :hasFormLog="liveInfo.hasFormLog" :collectPage="liveInfo.collectPage"
      :enableEdit="liveInfo.enableEdit" @goForm="goForm"></rewrite-form> -->

    <collage-persons-list class="c-p c-bd-b12-f5" v-if="liveInfo && liveInfo.isBuyed == 0 && liveInfo.collage && (liveInfo.collage.status == 2 || liveInfo.collage.status == 1) && liveInfo.collage.isCollageOnline == 1" :collage="liveInfo.collage" @goCollageDetail="gcd"></collage-persons-list>
    <collocation-buy-com :prodInfo="{prodType: 180, prodId: liveInfo.lpId}" class="c-bd-b12-f5" v-if="showCollocation" :relateCollocationArr="relateCollocation" :borderTop="true"></collocation-buy-com>
    <more-device :positionType="1" class="c-bd-b12-f5" :personalRoomIsLiving="liveInfo.liveStatus == 1 ? true : false" :prodInfo="{prodType: 180, prodId: liveInfo.lpId, socialRoomId: liveInfo.socialRoomId, detailId: liveInfo.detailInfo ? liveInfo.detailInfo.detailId : '', liveType: 6}" v-if="liveInfo.showMoreDevice"></more-device>
    <!-- <div class="gap-box12"></div> -->
    <div class="c-ph24">
      <my-small-tabbar class="c-bg-white c-hh76 c-bd-b1-f6" :styleType="2" :class="tabhBarFixed == true ? isiOS ? 'tab-bar-ios' : ($isWxApp() ? 'tabhBar c-wx-top0' : 'tabhBar')  : ''" :tabList="tabList" :tabIndex="tabIndex" @changeTab="changeType"></my-small-tabbar>
    </div>
    <div class="c-ph24 c-minh640" v-show="tabIndex==0">
      <course-description ref="descriptions" :prodType="180" :prodId="liveInfo.lpId"></course-description>
    </div>
    <div class="c-pb60 c-minh640" v-show="tabIndex==1">
      <div class="c-mh24 teacher-info c-p c-br20" :class="item.intro ? 'has-intro':''" v-for="(item,index) in liveInfo.teachers" :key="index">
        <div class="c-flex-row   item-avatar" :class="item.intro ? 'c-aligni-end':'c-aligni-center'">
          <img v-lazy="item.avatar || require('../../../assets/defult_head.png')" class="c-ww80 c-hh80 c-brp50" alt=""/>
          <p class="c-fs26 c-fc-xblack c-ml20 c-fw500">{{item.realName?item.realName:item.userName || '未知'}}</p>
        </div>
        <div v-if="item.intro" class="c-fs24 c-fc-sblack c-pl20 c-pr20 c-pt10 c-pb30 c-p c-ml20 c-mr20 c-mb20">{{item.intro}}</div>
      </div>
    </div>
    <personal-room-review v-show="tabIndex==2" :showTryLook="showTryLook" :isShowViewers="liveInfo.isShowViewers" :coverimg="liveInfo.cover" :liveList='backList' :dataStatus='dataStatus' @clickBackList="clickBackList"></personal-room-review>
    <div class="c-bg-white" v-if="companyAuth.enableComboModule == 1&&tabIndex==3">
      <package-index-com v-if="packageList.length > 0" :islive='1' :styleType="2" @clickALLMore='showPackageList' class="c-minh640" :showAll="true" :isNewRelatedStyle="true" :proType="15" :proId="liveInfo.lpId" :isHomePage="false" :packageList="packageList"></package-index-com>
      <loading-status-tem :noData="packageList.length==0" :noDataText="'暂无内容'" noDataStyle="padding: 0px" :class="packageList.length==0 ? 'c-bg-white c-hh640 c-flex-column c-flex-center' : ''"></loading-status-tem>
    </div>
    <!-- 评价 -->
    <div v-show="tabIndex==5">
      <live-comment ref="liveComment" class="c-minh640" :prodId="liveInfo.lpId" :prodType="180" @updateCommentCount="updateCommentCount"></live-comment>
    </div>
    <subscribe-qrcode ref="subscribeQrcode"></subscribe-qrcode>
    <!-- 入群引导 -->
    <group-guidance ref="guidance" :isType="false" :groupObject="liveInfo.guideData"></group-guidance>
    <coupon-list-com
      @closeModal="closeModal"
      @getCouponList="getCouponList"
      :couponIsPage="couponIsPage"
      :couponLoading="couponLoading"
      :couponList="couponList"
      :showCoupon="showCoupon"
      :prodId="Number(lId)"
      :prodType="180"
      :isMarketing="isMarketing"
      :dataInfo="liveInfo"
      :chainInfo="chainInfo"
    >
    </coupon-list-com>
    <!-- 直播情况特殊，上面那个有效期组件被套在overflow：scroll中，会导致遮罩盖不到封面部分，所以使用两个有效期组件，一个显示文本，一个弹窗 -->
    <valid-time-com ref="validTime" v-if="liveInfo && (liveInfo.status==2 || liveInfo.status==4) && liveInfo.effectiveProd" :dataInfo="liveInfo" :prodId="liveInfo.lpId" :prodType="180" :isShowDateAndTime="false"></valid-time-com>
    <live-comment-set ref="liveCommentSet" :prodType="180" :prodId="liveInfo.lpId" @changeCommentList="changeCommentList"></live-comment-set>
  </section>
</template>

<script>
import { utilJs } from "@/utils/common.js";
import PriceBar from '@/components/templates/common/priceBar.vue';
import subscribeQrcode from "@/components/templates/live/subscribeQrcode.vue";
import MySmallTabbar from "@/components/templates/common/MySmallTabbar.vue";
import courseDescription from '@/components/templates/courseDescription';
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
// import rewriteForm from "@/components/templates/common/rewriteForm.vue";
import groupGuidance from '@/components/templates/common/groupGuidance.vue'
import couponListCom from "@/components/templates/couponListCom.vue";
import CollagePersonsList from "@/components/templates/collage/collagePersonsList.vue";
import collocationBuyCom from '@/components/templates/collocationBuyCom';
import DiscountInfo from "@/components/templates/common/discountInfo.vue";
import VipEntry from "@/components/templates/common/vipEntry.vue";
import InviteGroup from "@/components/templates/common/inviteGroup.vue";
import PackageIndexCom from "@/components/templates/packageIndexCom.vue";
import PersonalRoomReview from '@/components/templates/live/personalRoomReview.vue';
import bargainRules from '@/components/templates/bargain/bargainRules';
import validTimeCom from "@/components/templates/common/validTimeCom.vue";
import formEntry from "@/components/homePage/form/formEntry.vue"
import liveComment from "@/components/templates/live/liveComment.vue";
import liveCommentSet from "@/components/templates/live/liveCommentSet.vue";
import MoreDevice from "@/components/templates/moreDevice.vue"
export default {
  name: "personalRoomDetail",
  components: {
    liveComment,
    liveCommentSet,
    formEntry,
    DiscountInfo,
    PersonalRoomReview,
    PackageIndexCom,
    VipEntry,
    InviteGroup,
    PriceBar,
    subscribeQrcode,
    MySmallTabbar,
    courseDescription,
    loadingStatusTem,
    // rewriteForm,
    groupGuidance,
    couponListCom,
    CollagePersonsList,
    collocationBuyCom,
    bargainRules,
    validTimeCom,
    MoreDevice
  },
  props: {
    isCallGroupGuidanceOut: {
      //是否在组件外部调用入群引导（详情页可以写在里面，但是直播间的时候会出现遮挡，所以加了这个参数）
      type: Boolean,
      default: false
    },
    isCallSubscribeQrcodeOut: {
      //是否在组件外部调用二维码（详情页可以写在里面，但是直播间的时候会出现遮挡，所以加了这个参数）
      type: Boolean,
      default: false
    },
    recRelateId:{
      type: String,
      default: ''
    },
    recType:{
      type: String,
      default: ''
    },
    isMarketing: {
      //是否参与营销
      type: Boolean,
      default: false
    },
    showCollocation: {
      //是否展示搭配购
      type: Boolean,
      default: false
    },
    showTryLook: {
      //是否展示试看标签
      type: Boolean,
      default: false
    },
    packageList: {
      //关联产品
      type: Array,
      default: []
    },
    companyAuth: {
      //关联产品
      type: Object,
      default: {}
    },
    backList: {
      //关联产品
      type: Array,
      default: []
    },
    dataStatus:{
      type: String,
      default: 'HAS_MORE_DATA'
    },
  },
  data() {
    return {
      tabList: [{
        title: "详情",
        index: 0,
      }, {
        title: "讲师",
        index: 1,
      }],
      liveInfo: null,
      isSet: 1,
      discountName: '',
      disconutNum: 100,
      showCoupon: false,
      couponList: [],
      couponIsPage: false,
      couponPage: 1,
      couponLoading: false,
      vipType: localStorage.getItem("vipType" + localStorage.getItem("userId")),
      vipFitstItem: localStorage.getItem("vipArr1") ? JSON.parse(localStorage.getItem("vipArr1")) : null,
      svipFitstItem: localStorage.getItem("svipArr1") ? JSON.parse(localStorage.getItem("svipArr1")) : null,
      isShowFormlg:localStorage.getItem("showForm") == 1 ? true : false,
      relateCollocation: [],
      personalSet:false,
      tabIndex:0,
      chainInfo: '',
      isChainProd: false,
    };
  },
  created() { },
  mounted() { },
  computed: {
    // 判断是否是推荐有礼;
    isRecommendShow() {
      return this.recType == 3 && this.liveInfo.recommend && this.liveInfo.recommend.isExist
    },
  },
  watch: {
  },
  methods: {
    showPackageList() {
      this.$emit('showPackageList')
    },
    setComment() {
      this.$refs.liveCommentSet.openCommentSet()
    },
    changeCommentList() {
      this.$refs.liveComment.inintList()
    },
    openValidTimeDesc() {
      if (this.$refs.validTime) {
        this.$refs.validTime.openValidTimeDesc(1)
      }
    },
    clickBackList(index) {
      this.$emit('clickBackList', index)
    },
    updateCommentCount(commentCount) {
      if (commentCount > 0) {
        for (let item in this.tabList) {
          if (this.tabList[item].index == 5) {
            this.tabList[item].title = '评价(' + commentCount + '条)'
          }
        }
      }
    },
    changeType: function (type) {
      //this.typeBar = typeBar;
      if (this.tabIndex != type) {
        this.tabIndex = type;
        if (this.tabIndex == 2) {
          this.$emit('initData')
        }
      }
      if (this.tabIndex == 5) {
        this.$refs.liveComment.inintList()
      }
      this.$emit('changeIndex', this.tabIndex)
      return false;
    },
    getProdRelateCollocation() {
      utilJs.getMethod(`${global.apiurl}prodsCollocation/getProdRelateCollocation?prodType=180&prodId=${this.liveInfo.lpId}`,
        res => {
          this.relateCollocation = res.data ? res.data.slice(0, 3) : [];
        }
      );
    },
    gcd(cinfo) {
      if (this.liveInfo.isBuyed == 0 && this.liveInfo.isUserGroup == 1 && this.liveInfo.isInUserGroups != 1) {
        this.$cjConfirm({
            showCancelButton: false,
            message: this.liveInfo.payType == 2 ? '仅指定用户可购买' : '仅指定用户可观看',
        });
        return;
      }
      this.$emit('goCollageDetail', cinfo.groupId, cinfo.collageId)
    },
    closeModal() {
      this.showCoupon = false;
    },
    //获取可以领取的优惠券
    getCouponList: function () {
      if (!this.couponLoading) {
        this.couponLoading = true;
        let $this = this;
        utilJs.getMethod(global.apiurl + 'redeemCodes/getCouponsByRedeemType?courseId=' + this.liveInfo.lpId + '&redeemType=184&limit=10&page=' + this.couponPage, function (res) {
          $this.couponLoading = false;
          $this.couponList = $this.couponList.concat(res.data);
          $this.couponPage = res.next_page_url ? ($this.couponPage + 1) : $this.couponPage;
          $this.couponIsPage = res.next_page_url ? true : false;
        },
          failRes => {
            $this.couponLoading = false;
          }
        );
      }
    },
    public_initInfo(info) {
      this.resetData();
      this.liveInfo = info;
      this.setDiscontInfo();
      this.getCouponList()
      if (this.liveInfo.isBuyed != 1) {
        this.getProdRelateCollocation();
      }
      this.$nextTick(() => {
        this.$refs.descriptions.getDescptionDetail();
      })
      let curCompanyId = localStorage.getItem('companyId');
      let setpersonal = ['79jee7', 'lj7l', '8rxm', '5r4y7']; //这三个公司就算有直播视频简介也自动跳直播间
      if (setpersonal.includes(curCompanyId)) { //中泰定制
        this.personalSet = true
      }
      if (this.liveInfo.isPlayBackAllowWatch) {
        this.tabList.push({
            title: "回放列表",
            index: 2,
        })
      }
      console.log(this.packageList, 1111111111)
      if (this.companyAuth.enableComboModule == 1) {
        this.tabList.push({
            title: "相关",
            index: 3,
        })
      }
      if (this.liveInfo.isOpenStudentComment == 1) {
        if (this.liveInfo.commentCount > 0) {
          this.tabList.push({
            title: '评价(' + this.liveInfo.commentCount + '条)',
            index: 5,
          })
        } else {
          this.tabList.push({
            title: '评价',
            index: 5,
          })
        }
      }
      utilJs.getChainInfo(global.ckFrom.personalLive, this.liveInfo.lpId).then(res => {
        this.chainInfo = res;
        this.isChainProd = this.chainInfo && this.chainInfo.isChainProd;
      });
    },
    resetData() {
      this.chainInfo = '';
      this.isChainProd = false;
      this._isClicking = false;
    },
    //设置身份对应的折扣和身份名称
    setDiscontInfo() {
      const NAME_MAP = {
        1: '',
        2: 'VIP',
        4: 'SVIP',
      }
      let agnetName = this.liveInfo.commonProdInfo && this.liveInfo.commonProdInfo.agentName;
      this.discountName = NAME_MAP[this.vipType] || agnetName || '';
      let agentDiscount = this.liveInfo.commonProdInfo && this.liveInfo.commonProdInfo.agentDiscount;
      let agentDiscountNum = (this.vipType == 3 || this.vipType > 4) && agentDiscount < 100 ? agentDiscount : '';
      //服务商存在折扣
      if (agentDiscountNum) {
        this.discountNum = agentDiscountNum;
        return
      }
      //svip折扣
      if (this.vipType == 4 && this.liveInfo.svipDiscount < 100) {
        this.discountNum = this.liveInfo.svipDiscount;
        return;
      }
      //vip折扣
      if ((this.vipType == 1 || this.vipType == 2) && this.liveInfo.vipDiscount < 100) {
        this.discountNum = this.liveInfo.vipDiscount;
        return;
      }
      return 100;
    },
    handleShowGuidePop() {
      // 显示入群引导
      if (this.isCallGroupGuidanceOut) {
        this.$emit('handleShowGuidePop');
      } else {
        this.$refs.guidance.isShowPop();
      }
    },
    //进入表单
    goForm() {
      if (this.liveInfo.isRelForm && localStorage.getItem("showForm") == 1 && (!this.liveInfo.hasFormLog || (this.liveInfo.hasFormLog && this.liveInfo.enableEdit == 2))) {
        let isGoBack = (this.liveInfo.isUserGroup == 1 && this.liveInfo.isInUserGroups != 1) ||
        this.liveInfo.isBuyed == 1 ||
        this.liveInfo.payType == 3 ||
        (this.isMarketing && !this.liveInfo.sales) ||
        this.liveInfo.isSaleOnly == 0 ? 1 : 0;
        console.log(isGoBack, this.isMarketing, 11111)
        this.$routerGo(this, "push", {
          path: '/homePage/form',
          query: {
            isGoBack: isGoBack,
            cId: -1,
            extId: this.liveInfo.lpId,
            ckFrom: global.ckFrom.personalLive,
            isFromInvite: 0,
            pId: -1,
            relType: 20,
            type: 1, //type 1表示关联产品
            recRelateId: this.recRelateId,
            recType: this.recType,
            joinType: 1, // jointype1表示密码加入
          }
        });
      }
    },
  },
  activated() { },
  deactivated() {
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only  -->
<style scoped lang="scss">
@function pxToRem($px) {
  //$rpx为需要转换的字号
  @return $px/40 + rem;
}
// .start-bg {
//   background: linear-gradient(
//     -90deg,
//     rgba(245, 108, 108, 1),
//     rgba(245, 108, 108, 0.7)
//   );
// }
.camp-guide {
  background: url("../../../assets/i/wap/course/group_guidance_bg.png") no-repeat;
  background-size: 100% 100%;
}
.status-btn{
  height: pxToRem(28);
  line-height:pxToRem(28);
  border-radius: pxToRem(15);
}
.pillar{
  width: 1px;
  margin: 0 1px;
  height: pxToRem(4);
  background: #fff;
  border-radius: 5px;
  animation: pillarDance 2s infinite  ease;
}
.pillar:first-child{
  animation-delay:0.5s;
}
.pillar:nth-child(2){
  animation-delay:1s;
}
.pillar:nth-child(3){
  animation-delay:1.5s;
}
.status-1 {
  background: var(--live-theme-color);
}
@-webkit-keyframes pillarDance{
    0%{height:pxToRem(4);}
    50%{height:pxToRem(16);}
    100%{height:pxToRem(4);}
}
.fc-3F73F8 {
  color: #3F73F8;
}
.try-look-tag{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin-right: 0.3rem;
  width: 1.55rem;
  height: 0.7rem;
  border-radius: 0.1rem;
  font-size: 0.45rem;
}
.teacher-info{
  background: #ffffff;
  margin-top: 1rem;

}
.teacher-info.has-intro{
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  min-height: 2.25rem;
  box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.1);
}
.teacher-info .item-avatar{
    position: relative;
    left:0.5rem;
}
.teacher-info.has-intro .item-avatar{
    position: absolute;
    left:0.5rem;
    right: 1rem;
    top:-0.75rem;
}
.tabhBar /deep/ {
  padding-left:0.6rem;
  .tab-item {
    margin-right:1.2rem;
  }
}
.tabhBar /deep/ section{
  height: 2.1rem;
}
.tabhBar /deep/ .tab-icon{
  bottom: 0.355rem;
}
.tabhBar.one /deep/ section{
  padding:0 0 0 .6rem;
  justify-content: flex-start;
}
.tabhBar /deep/ .theme-bg{

}
</style>
